/**
 * @Name: HW_5-1.css
 * @Description: 問卷設計
 * @Author: 李瑞豪
 * @Update: 2019-09-18 11:04
 */

*{
  outline: none;
}
.box-showdow{
  border: 2px solid #c5c1c1;
  border-radius: 5px;
  box-shadow: 5px 5px 5px #999;
}
ul{
  list-style: none;
}
span{
  font-size: 1.2em;
  font-weight: bold;
  vertical-align: middle;
}
input{
  border: 2px inset #eee;
  border-radius: 5px; 
  height: 25px;
  margin-top: 5px;
  padding-left: 5px;
  vertical-align: middle;
}
::-webkit-input-placeholder { 
  font-style: italic;
}
.add-choice::-webkit-input-placeholder{
  font-style: normal;
}
input[type="checkbox"],
input[type="radio"]{
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: 0;
}

header{
  width: 1000px;
  box-sizing: border-box;
  margin: 0 auto;
}
header>h1{
  display: inline-block;
}
header>span{
  color: #f00;
  margin-left: 50px;
  font-size: 1.5rem;
}
main{
  width: 1000px;
  box-sizing: border-box;
  margin: 0 auto;
}
.save{
  height: 60px;
  background-color: #ccc;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.save p{
  font-size: 0.7rem;
  margin-left: 10px;
}
button > span{
  margin-left: 5px;
  font-size: 1.2rem;
}
button{
  display: flex;
  flex-direction: row;
  height: 40px;
  color: #fff;
  background: #999;
  border: 2px solid #666;
  border-radius: 10px;
  margin-right: 10px;
}
button:hover{
  color: #333;
  background: #fff;
  box-shadow: 3px -3px 5px #999;
}
button:active {
  transform: scale(0.95);
}
.question-setting{
  background-color: #ccc;
}
.question-setting > div{
  min-height: 50px;
  margin-left: 20px;
}
.question-setting button{
  float: right;
}
.question-type{
  width: 205px;
  height: 30px;
  border: 2px inset #eee;
  border-radius: 5px;
  margin-left: 40px;
  padding-left: 5px;
  margin-top: 10px;
}
.question-title{
  width: 700px;
  margin-left: 42px;
}
.question-preview input[type="number"]{
  width: 200px;
  margin-left: 122px;
}
.question-preview .first-check{
  margin-left: 44px!important;
}
.question-preview input[type="radio"],
.question-preview input[type="checkbox"]{
  margin-left: 122px;
  margin-right: 5px;
}
.question-preview input[type="text"]{
  width: 677px;
}
.question-preview label{
  margin-left: 62px;
}
.question-preview label input[type="checkbox"]{
  margin-left: 0px;
}
.question-preview textarea{
  height: 90px;
  width: 700px;
  padding-left: 5px;
  margin-left: 124px;
}
.required-sign{
  padding-left: 5px;
  color: #f00;
}
.question-list{
  min-height: 300px;
  background: #ddd;
  padding: 0 0 15px;
}
.question-item{
  position: relative;
  width: 100%;
  padding: 20px 20px 0;
  box-sizing: border-box;
}
.question-item h4{
  margin: 0 20px 5px 0;
  max-width: 750px;
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: normal;
  display:block;
}
.question-item input[type="text"],
.question-item input[type="password"]{
  width: 700px;
  margin-left: 35px;
}
.question-item input[type="number"]{
  margin-left: 35px;
  width: 200px;
}
.question-item input[type="radio"],
.question-item input[type="checkbox"]{
  margin-left: 35px;
}
.question-item textarea{
  height: 150px;
  width: 700px;
  margin-left: 35px;
}
.question-item label span{
  font-size: 1em;
  font-weight: 500;
  max-width: 41%;
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: normal;
  display: inline-block;
}
.detail-operation{
  display: none;
}
.detail-operation button{
  height: 30px;
  margin: 5px; 
}
.detail-operation button > span{
  margin-left: 0;
  font-size: 0.8rem;
}
.question-item:hover .detail-operation{
  display: flex;
  flex-direction: row-reverse;
  position: absolute;
  width: 210px;
  height: 40px;
  top: 10px;
  right: 0;
  border-radius: 5px;
}

